<script setup lang="ts">
import {design} from "@/packages/lowCode/store/design";
import {commonStore} from '@/store/common';

const commonStores = commonStore();
import {useI18n} from 'vue-i18n';
import {ElMessage} from "element-plus";

const {locale} = useI18n();
//这里只是为了不影响应用工程的打包
const designStore = design();
designStore.$patch({
  designType: 0,
});

/**
 * 中英文状态
 */
const i18nType = computed(() => {
  return commonStores.i18nType;
})

const isZh = ref(true);

/**
 * 语言切换
 * @param val
 */
const languageChange = (val: string | number | boolean) => {
  const type = val ? 'zh' : 'en';
  locale.value = type;
  commonStores.setI18nType(type);
}

/**
 * 路由区域显示
 */
const loadRouter = ref(true);
/**
 * 重新加载页面
 */
const reLoadRouter = () => {
  loadRouter.value = false;
  nextTick(() => {
    loadRouter.value = true;
  })
}
const visible = ref(false);
const token = ref('');
const tokenSet = () => {
  visible.value = true;
}
const tokenCheck = () => {
  localStorage.setItem('token', token.value.trim());
  visible.value = false;
  ElMessage.success('token设置成功!');
}
watch(i18nType, () => {
  reLoadRouter();
})
</script>

<template>
  <div class="flex flex-col h-full">
    <div class="h-60px">
      <span>{{ isZh ? '中文' : '英文' }}</span>
      <el-switch v-model="isZh" @change="languageChange"></el-switch>
      <el-button class="ml-10px" @click="tokenSet">token设置</el-button>
    </div>
    <div class="flex-1">
      <router-view v-if="loadRouter"/>
    </div>
  </div>
  <CisDialog
      v-model="visible"
      title="token"
      :height="450"
  >
    <el-input type="textarea" v-model="token"></el-input>
    <template #footer>
      <el-button @click="tokenCheck" type="primary">确定</el-button>
    </template>
  </CisDialog>
</template>

<style>
body {
  overflow: hidden;
}

#app {
  width: 100vw;
  height: 100vh;
}
</style>
